<!-- 查看某个订单的状态，如是否已处理，选择催单等等 -->
<template>
	<view>
		<view class="out-border-line column-middle flex-row">
			<text class="order-status-title fontside-16">订单状态：</text>
			<text class="order-status-text" v-if="orderDetail.status == 0">待处理</text>
			<text class="order-status-text" v-if="orderDetail.status == 1">配送中</text>
			<text class="order-status-text" v-if="orderDetail.status == 2">已完成</text>
			<text class="order-status-text" v-if="orderDetail.status == 3">已取消</text>
		</view>
		<view class="out-border-line column-middle">
			<view class="common-width90 column-middle flex-row" style="height: 120rpx;padding: 10rpx 0;">
				<image class="icon" src="/static/corporation/groceryStore/kaoqinS.png"></image>
				<view class="right-box flex-column">
					<view class="right-text-box flex-just column-middle">
						<text class="left fontside-16">{{orderDetail.info.name}}</text>
						<text class="right fontside-16">{{orderDetail.info.phone}}</text>
					</view>
					<view class="right-text-box flex-just column-middle">
						<text class="left fontside-16">{{orderDetail.info.school}}</text>
						<text class="right fontside-16">{{orderDetail.info.address}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="out-border-line flex-column" >
			<view class="flex-just" v-for="(item,index) in orderDetail.goodsInfoList" :key="index">
				<van-card :desc="item.goodsInfo.description" :title="item.goodsInfo.name" :thumb="item.goodsInfo.picture" class="card-box">
				</van-card>
				<view class="stepper-box">
					<text class="stepper-price">￥{{item.goodsInfo.price}}</text>
					<text class="stepper-count">x{{item.total}}</text>
				</view>
			</view>
			<view class="bottom-text">共{{orderDetail.total}}件商品，共计{{orderDetail.price}}元</view>
		</view>
		<view class="bottom-out-box">
			<view class="common-width90  column-middle" style="position: relative;">
				<view class="button-box column-middle flex-just">
					<van-button round type="info" @click="noOPen()" size="small">我要催单</van-button>
					<van-button round type="info" @click="noOPen()" size="small">取消订单</van-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderRecordDetail
	} from '@/common/api/groceryStore/order.js'
	export default {
		data() {
			return {
				url: '/static/corporation/groceryStore/club_logo.jpg',
				orderId: 0,
				orderDetail: {}
			}
		},
		methods: {
			// 获取订单详情
			getOrderRecordDetail:function(orderId){
				uni.showLoading({
					title: '加载中'
				})
				getOrderRecordDetail(orderId).then(res => {
					if (res.data.code == 200) {
						if (res.data.data != null) {
							this.orderDetail = res.data.data
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 暂无开放
			noOPen:function(){
				uni.showToast({
					title: '暂无开放',
					icon: 'none'
				})
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.getOrderRecordDetail(this.orderId)
		}
	}
</script>

<style>
.order-status-title{
	width: 25%;
	height: 90rpx;
	line-height: 90rpx;
	margin-left: 5%;
} 
.order-status-text{
	width: 20%;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 16px;
	color: #8A8A8A;
}
.icon{
	width: 70rpx;
	height: 70rpx;
}
.right-box{
	width: 80%;
	height: 120rpx;
	margin-left: 5%;
}
.right-text-box{
	width: 100%;
	height: 48%; 
}
.left{
	width: 35%;
	height: 100%;
}
.right{
	width: 65%;
	height: 100%;
}
.stepper-box {
		width: 30%;
		position: relative;
		border-bottom: 1px solid #FFFFFF;
	}
	.stepper-price {
		position: absolute;
		right: 40rpx;
		color: red;
		top: 10rpx;
	}
	
	.stepper-count {
		position: absolute;
		top: 80rpx;
		right: 40rpx;
	}
	.bottom-text{
		width: 95%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}
	.button-box{
		width: 40%;
		height: 70rpx;
		position: absolute;
		right: 0;
	}
</style>
